<div class="forumn-page container-fluid">
  <div class="row">
    <div class="col-2"></div>
    <div class="col-10 forumn-page-right">
      <div class="table-content">
        <div class="table-search">
          <div class="search-nav">新着情報</div>
          <div class="search-icon">
            <input type="text" class="search-input">
            <!-- fa-search -->
            <i class="fa fa-search"></i>
          </div>
        </div>
        <div class="table-area">
          <table class="table table-striped table-sm C-table-border">
            <thead class="thead-dark">
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table-pagination">
          <div class="pagenation">
            <img src="../../../static/images/prevpage.png" alt="prevpage">
            <span>1</span>
            <img src="../../../static/images/nextpage.png" alt="nextpage">
            <span>表示件数</span>
            <select class="form-control form-control-sm">
              <option>50</option>
            </select>
          </div>
          <div class="operate-btn">
            <button class="btn btn-primary">
              <i class="fa fa-plus"></i>
              スレッド作成
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
.forumn-page {
  height: 100%;
  box-sizing: border-box;
}
.forumn-page .row {
  height: 100%;
}
.forumn-page .forumn-page-right {
  padding-top: 2.5rem;
  padding-bottom: 10rem;
  padding-right: 3.75rem;
}
.forumn-page .forumn-page-right .table-content {
  height: 100%;
  background: #fff;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.forumn-page .forumn-page-right .table-content .table-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.forumn-page .forumn-page-right .table-content .table-search .search-nav {
  color: #4D4D4D;
  font-size: 20px;
  font-weight: bold;
}
.forumn-page .forumn-page-right .table-content .table-search .search-icon {
  position: relative;
}
.forumn-page .forumn-page-right .table-content .table-search .search-icon .search-input {
  outline: none;
  display: block;
  border: 1px solid #ccc;
  border-radius: 2rem;
  padding: 5px 0;
  padding-left: 15px;
  padding-right: 35px;
}
.forumn-page .forumn-page-right .table-content .table-search .search-icon .fa-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translate(0, -50%);
  color: #3DA9D9;
  cursor: pointer;
}
.forumn-page .forumn-page-right .table-content .table-area {
  margin-top: 23px;
  flex: 1;
}

</style>